<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{title}}</h2>
			<my-temp1></my-temp1>
			<my-temp2></my-temp2>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	
	<template id="temp1">
		<div>
			<p>这是{{name}}组件</p>
			<button @click="send">发送</button>
		</div>
	</template>
	<template id="temp2">
		<div>
			<p>这是{{name}}组件</p>
			<p>{{str}}</p>
		</div>
	</template>
	
	<script type="text/javascript">
		// 1. 创建中央总线
		const bus = new Vue();
		
		let temp1 = {
			template:"#temp1",
			data:()=>{
				return {
					name:"子 - a",
					msg:"来自a的数据"
				}
			},
			methods:{
				send(){
					// 3. 要发送数据的组件内,找到合适的时机,使用bus.$emit触发在接收组件中定义的事件,并将要送的数据,传入
					bus.$emit("abc", this.msg)
				}
			}
		}
		
		
		let temp2 = {
			template:"#temp2",
			data:()=>{
				return {
					name:"子 - b",
					str:""
				}
			},
			created(){
				// 2. 在要接受数据的组件中,使用bus.$on方法定义事件,准备事件处理函数,事件处理函数的默认参数,就是将要传过来的数据
				bus.$on("abc",(v)=>{
					// console.log(v);
					this.str = v
				})
			}
		}
		
		// 兄弟组件之间的传值:
			// 定义事件方 - 接收方
			// 触发事件方 - 发送方
		
		let vm = new Vue({
			el:"#app",
			data:{
				title:"组件之间的传值-兄弟互传",
			},
			components:{
				myTemp1:temp1,
				myTemp2:temp2
			}
		});
		
		
	</script>
</html>
